<!-- >> userprofile-user-feed-html -->
<GridLayout rows="auto *" sdkExampleTitle sdkToggleNavButton>
    <GridLayout row="0" rows="auto auto" backgroundColor="#adadad">

        <Image row="0" width="100%" height="150" stretch="aspectFill" src="~/common-screens-category/userprofile/user-feed/images/nativescript.png"></Image>

        <GridLayout row="0" rowSpan="2" rows="auto auto auto" columns="* auto" verticalAlignment="bottom" class="m-t-25">
            <Image row="0" col="0" src="res://icon" height="40" width="40" class="m-l-15" horizontalAlignment="left" borderWidth="1"
                borderColor="white"></Image>
            <Label row="1" col="0" text="NativeScript" class="text-left p-l-15" textWrap="true"></Label>
            <Label row="2" col="0" text="Angular-2" class="text-left p-l-15" textWrap="true"></Label>
            <Button row="0" col="1" text="Follow" (tap)="followTap()" class="btn btn-outline btn-rounded-sm btn-active"></Button>
        </GridLayout>
    </GridLayout>

    <TabView row="1" #tabView class="tab-view">
        <GridLayout *tabItem="{title: 'BasicList'}">
            <ListView class="list-group" [items]="countries" (itemTap)="onItemTapFirstList($event)" separatorColor="white">
                <ng-template let-country="item">
                    <StackLayout class="list-group-item">
                        <Label class="list-group-item-heading" [text]="country.name"></Label>
                        <Label class="list-group-item-text" [text]="'Continent: '+country.continent"></Label>
                    </StackLayout>
                </ng-template>
            </ListView>
        </GridLayout>
        <GridLayout *tabItem="{title: 'Dividers'}">
            <ListView class="list-group" [items]="countries" (itemTap)="onItemTapSecondList($event)" separatorColor="gray">
                <ng-template let-country="item">
                    <StackLayout class="list-group-item">
                        <Label class="list-group-item-heading" [text]="country.name"></Label>
                        <Label class="list-group-item-text" [text]="'Continent: '+country.continent"></Label>
                    </StackLayout>
                </ng-template>
            </ListView>
        </GridLayout>
        <GridLayout *tabItem="{title: 'Thumbnails'}">
            <ListView class="list-group" [items]="countries" (itemTap)="onItemTapThirdList($event)">
                <ng-template let-country="item">
                    <GridLayout class="list-group-item" rows="* *" columns="auto, *">
                        <Image row="0" col="0" rowSpan="2" [src]="country.imageSrc" class="thumb img-circle"></Image>
                        <Label row="0" col="1" [text]="country.name" class="list-group-item-heading"></Label>
                        <Label row="1" col="1" class="list-group-item-text" [text]="'Continent: '+country.continent"></Label>
                    </GridLayout>
                </ng-template>
            </ListView>
        </GridLayout>
    </TabView>

</GridLayout>
<!-- << userprofile-user-feed-html -->